<template>
	<view class="">
		<u-navbar title="签到" :autoBack="true" :placeholder="true"></u-navbar>

		<view class="nc-signin-content">
			<view class="jfgz" @click="navigateTo" data-url="/subPages/integralList/integrationRule">
				积分规则
			</view>
			<view class="" style="z-index: -10;width: 100%;">
				<image src="https://wyc.jslhkj.cn/uploads/20231031/61fdba49dff841cde071dddabaed0a5e.jpg" mode=""
					class="bj-img"></image>

			</view>




			<view class="signin-content">
				<view class="date">{{ dateYear }}年{{ dateMonth }}月</view>
				<view class="week">
					<text class="ns-text-color-gray">日</text>
					<text class="ns-text-color-gray">一</text>
					<text class="ns-text-color-gray">二</text>
					<text class="ns-text-color-gray">三</text>
					<text class="ns-text-color-gray">四</text>
					<text class="ns-text-color-gray">五</text>
					<text class="ns-text-color-gray">六</text>
				</view>
				<view class="aggregate-date">
					<text class="date-box" v-for="(value, index) in dateWeek" :key="index"></text>
					<block v-for="(value, index) in dateArr" :key="index">
						<view v-if="value.issign > 0" class="date-box">
							<text class="date-icon icon-qiandao iconfont ns-text-color"></text>
							<text class="date-text">已签到</text>
						</view>
						<view v-else-if="currentDate == value.day" class="date-box">
							<text class="date-text sign ns-bg-color">{{ value.day.split('/')[2] }}</text>
						</view>
						<view v-else class="date-box">
							<text class="date-text">{{ value.day.split('/')[2] }}</text>
						</view>
					</block>
				</view>
			</view>
			<view class="signin-top ns-bg-color">
				<text :class="isSign ? 'active-text' : 'signin-text'" @click="sign()">{{ signName }}</text>
			</view>

			<loading-cover ref="loadingCover"></loading-cover>
		</view>

	</view>

</template>

<script>
	// import http from 'common/js/http.js';
	// import loadingCover from '@/components/loading/loading.vue';
	export default {
		components: {
			// loadingCover
		},
		data() {
			return {
				isSign: '',
				dateYear: 0, //年
				dateMonth: 0, //月
				currentTime: 0,
				dateWeek: '', //星期
				dateArr: [],
				currentDate: '', // 当前日期
				signName: '签到'
			};
		},
		// mixins: [http],
		onLoad() {
			/* 初始化签到情况 */
			this.getqiandaolist();
			/* 获取日期 */
			this.getCurrentTime();
			this.issign();
		},
		methods: {
			navigateTo(e) {
				console.log(e);
				wx.navigateTo({
					url: e.currentTarget.dataset.url
				})
			},
			async issign() {
				let res = await this.$api.issign({
					uid: 9
				});
				console.log(res.data == 1 ? false : true);
				this.isSign = res.data == -1 ? true : false;
				if (this.isSign) this.signName = '已签到';
			},
			/* 获取当前日期 */
			getCurrentTime() {
				let myDate = new Date();
				this.dateYear = myDate.getFullYear();
				this.dateMonth = myDate.getMonth() + 1;
				let weekArray = new Array(0, 1, 2, 3, 4, 5, 6),
					currentDate = this.dateYear + '-' + this.dateMonth + '-' + '01';
				/* 获取当前日期 */
				this.currentDate = myDate.getDate();
				//获取当前星期
				this.dateWeek = weekArray[new Date(currentDate).getDay()];
			},

			// 获取签到列表
			async getqiandaolist() {
				let res = await this.$api.getqiandaolist({
					uid: 9
				});
				console.log(res);
				this.dateArr = res.data;
			},
			/* 点击签到 */
			async sign() {
				let res = await this.$api.addqd({
					uid: 9
				});

				if (res.code > 0) {
					this.isSign = res.data;
					this.signName = '已签到';
					/* 初始化签到情况 */
					this.getqiandaolist();

					wx.showToast({
						title: '签到成功',
						icon: 'success',
						duration: 2000
					})
					/* 获取日期 */
					this.getCurrentTime();
				} else {
					this.$util.showToast({
						title: res.message
					});
				}
			}
		}
	};
</script>

<style lang="scss">
	.nc-signin-content {
		position: relative;
	}

	.signin-top {
		width: 100%;
		height: 500rpx;
		text-align: center;
		padding-top: 40rpx;
		position: absolute;
		top: 950rpx;
		// background-color: #111;

		text {

			display: block;
			width: 200rpx;
			height: 80rpx;
			margin: 0 auto;
			border-radius: 50rpx;
			// font-size: $ns-font-size-lg + 12rpx;
			font-weight: 600;
			line-height: 80rpx;
			letter-spacing: 2rpx;
			border: 2rpx solid #111;
		}

		.active-text {
			// color: $ns-text-color-gray;
			background: #fff;
		}

		.signin-text {
			color: #111;
		}
	}

	.signin-content {
		width: 92%;
		margin: 0 auto;
		background: #fff;
		border-radius: 10rpx;
		padding: 30rpx 0;
		text-align: center;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.3);
		position: absolute;
		top: 300rpx;
		left: 4%;

		.date {
			height: 60rpx;
			line-height: 60rpx;
			font-size: 32rpx;
		}

		.week {
			width: 92%;
			margin: 30rpx auto 0;
			overflow: hidden;
			height: 60rpx;
			line-height: 60rpx;
			display: flex;

			text {
				width: 14.25%;
			}
		}
	}

	.aggregate-date {
		display: flex;
		flex-wrap: wrap;
		padding: 0 10rpx;
		font-size: 26rpx;

		.date-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 20rpx;
			height: 60rpx;
			width: 94rpx;
			line-height: 1.3;
			// font-size: $ns-font-size-base;
			// color: $ns-text-color-gray;
		}

		.date-text.sign {
			padding: 4rpx;
			color: #fff;
			border-radius: 50%;
			line-height: 40rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}

	.ns-bg-color {
		// background-color: #252525;
		// background-image: url("https://wyc.jslhkj.cn/uploads/20231031/61fdba49dff841cde071dddabaed0a5e.jpg");
	}

	.icon-qiandao {
		font-size: 48rpx;
	}

	.bj-img {
		width: 100vw;
	}

	.jfgz {
		position: absolute;
		right: 20rpx;
		top: 10rpx;
		font-size: 28rpx;
		color: #fff;

	}
</style>